<template>
  <view>
    <view class="tabs">
      <u-tabs :list="list" @click="clickTabs"></u-tabs>
    </view>
    <view class="active">
      <component :is="tag" :activeList="activeList"></component>
    </view>
  </view>
</template>

<script>
import Active from './active.vue'
import Actived from './actived.vue'
import ActivedDate from './actived-date.vue'
export default {
  components: {
    Active,
    Actived,
    ActivedDate
  },
  data() {
    return {
      index: 0,
      list: [
        {
          name: '未使用'
        }, 
        {
          name: '使用记录'
        }, 
        {
          name: '已过期'
        }
      ],
      activeList: []
    }
  },
  computed: {
    tag() {
      if(this.index === 0) return Active
      if(this.index === 1) return Actived
      if(this.index === 2) return ActivedDate
    }
  },
  onLoad() {
    this.getActiveList()
  },
  methods: {
    async getActiveList() {
      const {data} = await this.$axios({
        url: '/api/users/coupon/accompanying',
        data: {
          use: this.index 
        }
      })
      this.activeList = data.list
      this.list[0].name="未使用" + '(' + data.no_use + ')'
      this.list[1].name="使用记录" + '(' + data.use + ')'
      this.list[2].name="已过期" + '(' + data.out + ')'
    },
    clickTabs(item) {
      this.index = item.index
      this.getActiveList()
    }
  }
}
</script>

<style lang="scss" scoped>
.tabs{
  background: #FFFFFF;
}
.active{
  padding: 0 10px;
}
</style>
